<template>
    <div class="box">
            <div class="max">
                    <div class="inside">
                        <div class="top">
                            <img class="img1" src="/static/imgs_s06/s06_close.jpg" alt="">
                            <span class="ps">使用密码</span>
                        </div>
                        <div class="money">
                            <p class="frim">汇方圆科技有限公司</p>
                            <p class="much">
                                <span class="fh">￥</span>
                                <span class="sl">{{pay_amount}}</span>
                            </p>
                        </div>
                        <div class="pay">
                            <sapn class="fs">支付方式</sapn>
                            <span class="wx">微信支付></span>
                        </div>
                        <button @click="payOrder">确认支付</button>
                    </div>
                </div>
    </div>
</template>
<script>
export function getQuery(){
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  return options
}
export default {
  data() {
    return {
        pay_amount:"",
        order_sn:""
    };
  },

  components: {},

  methods: {
      //预支付，根据参数获取要支付的信息
   payOrder(e){
    var _this = this
    var orderId = this.order_sn    //获取要支付的订单号
    console.log(orderId)
    wx.request({
        url: 'http://localhost:2221/testJenkins/pay',
        data: {
            orderId:orderId,
            openid: 'oDsBK5KnClK5KnYFbOYLmOV9XN0E'  //使用上面登录授权后获取到的opentID
            //amount: amount,
            // openId: openId
        },
        header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        method: "POST",
        success: function (res) {
            console.log(res);
            _this.doWxPay(res.data);
        },
        fail: function (err) {
            wx.showToast({
                icon: "none",
                title: '服务器异常，清稍候再试'
            })
        },
    });
   },
   //真正的支付方法
doWxPay(param) {
        //小程序发起微信支付
        wx.requestPayment({
            timeStamp: param.data.timeStamp,//记住，这边的timeStamp一定要是字符串类型的，不然会报错
            nonceStr: param.data.nonceStr,
            package: param.data.package,
           // totalFee: param.data.total_fee,
            signType: 'MD5',
            paySign: param.data.paySign,
            success: function (event) {
                // success
                console.log(event);
                wx.showToast({
                    title: '支付成功',
                    icon: 'success',
                    duration: 2000
                });
            },
            fail: function (error) {
                // fail
                console.log("支付失败")
                console.log(error)
            },
            complete: function () {
                // complete
                console.log("pay complete")
            }
        });
    }
  }, 


     
 
  mounted(){
     this.order_sn=getQuery().order_sn;
      this.pay_amount=getQuery().pay_amount;
  },

  created() {
    // let app = getApp()
  }
};
</script>
    <style>
        html,body {
            height: 100%;
        }
        .box {
            width: 100%;
            height: 100%;
            background: #ddd;
        }
        .max {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 289px;
            height: 280px;
            border-radius: 9px;
            background: white;
            transform: translate(-50%, -50%);
            overflow: hidden;
        }

        .inside {
            display: flex;
            flex-direction: column;
            width: 274px;
            height: 253px;
            margin: 13px 7px 15px 8px;
        }

        .top {
            width: 268px;
            height: 20px;
            margin: 5px 4px 5px 4px;
        }

        .img1 {
            width: 16px;
            height: 16px;
        }

        .ps {
            font-size: 18px;
            color: #576B95;
            margin-left: 170px;
        }

        .money {
            width: 274px;
            height: 110px;
            border-bottom: 1px solid #ddd;
            text-align: center;
        }

        .frim {
            margin-top: 23px;
            margin-bottom: 27px;
            font-size: 15px;
            font-family: "PingFang SC";
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
            line-height: 11px;
        }

        .fh {
            font-size: 25px;
        }

        .sl {
            font-size: 30px;
            font-family: "DIN";
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 26px;
        }

        .pay {
            margin: 20px 4px 30px 4px;
        }

        .fs {
            font-size: 14px;
            color: #888;
            margin-right: 128px;
        }

        .wx {
            font-size: 16px;
            color: black;
        }

        button {
            width: 150px;
            height: 50px;
            border-radius: 9px;
            background: #0CC160;
            margin-left: 60px;
            font-size: 18px;
            color: white;
        }
    </style>